<template>
  <div class="container">
    <el-page-header
      @back="goBack"
      title="审核详情"
      style="padding: 10px 20px"
    />
    <el-form :model="auditForm" style="padding: 20px" label-width="80px">
      <el-form-item label="食堂名称">
        <span>{{ auditForm.canteenName }}</span>
      </el-form-item>
      <el-form-item label="包房名称">
        <span>{{ auditForm.messageName }}</span>
      </el-form-item>
      <el-form-item label="用餐类型">
        <span>{{ auditForm.orderEatType === "0" ? "午餐" : "晚餐" }}</span>
      </el-form-item>
      <el-form-item label="用餐时间">
        <span>{{ auditForm.orderEatTime }}</span>
      </el-form-item>
      <el-form-item label="审核状态">
        <span>{{
          auditForm.orderIstrue === "-1"
            ? "未审核"
            : auditForm.orderIstrue === "0"
            ? "失败"
            : "成功"
        }}</span>
      </el-form-item>
      <el-form-item label="预订人">
        <span>{{ auditForm.createBy }}</span>
      </el-form-item>
      <el-form-item label="餐标" v-show="auditForm.price">
        <span>{{ auditForm.price + "元" }}</span>
      </el-form-item>
      <el-form-item label="备注">
        <span>{{ auditForm.messageRemark }}</span>
      </el-form-item>
      <el-form-item>
        <TsButton
          v-show="auditForm.orderIstrue !== '0'"
          perms="managerAudit:audit:post"
          label="审核"
          size="small"
          type="success"
          @click="auditOrder"
        ></TsButton>
        <TsButton
          v-show="auditForm.orderIstrue !== '0'"
          perms="managerAudit:audit:post"
          label="驳回"
          size="small"
          type="warning"
          @click="replay"
        ></TsButton>
        <el-button size="small" type="danger" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
    <!--    驳回通过对话框-->
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="subimitForm">
        <el-form-item label="审核意见">
          <el-input type="textarea" v-model="subimitForm.content"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
//审核Id
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { auditInfo, audit } from "@/api/canteen/roomAudit";
import { ElMessage } from "element-plus";
const orderId = ref("");
const route = useRoute();
const router = useRouter();
function goBack() {
  router.back();
}
//审核详细数据
const auditForm = ref({});
//获取审核详情
function getAuditInfo() {
  auditInfo(orderId.value).then((res) => {
    auditForm.value = res.data;
  });
}
//对话框显示与隐藏
const dialogVisible = ref(false);
//关闭对话框的回调函数
function handleClose() {
  dialogVisible.value = false;
  title.value = "";
  subimitForm.value = {};
}
//对话框标题
const title = ref("审核");
//提交表单数据
const subimitForm = ref({});
//审核操作
function auditOrder() {
  dialogVisible.value = true;
  title.value = "审核";
}
//驳回操作
function replay() {
  dialogVisible.value = true;
  title.value = "驳回";
}
//提交
function submit() {
  audit({
    processExamineOpinion: subimitForm.value.content,
    processOrderId: orderId.value,
    processStatus: title.value === "审核" ? 1 : 0,
  }).then((res) => {
    if (res.code === 200) {
      ElMessage.success("提交成功");
      goBack();
      subimitForm.value = {};
      title.value = "";
    }
  });
}
onMounted(() => {
  orderId.value = route.query.id;
  getAuditInfo();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 200px);
  background: #ffffff;
  box-shadow: 0 0 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  margin-top: 20px;
  .hd {
    display: flex;
    align-items: center;
    justify-content: end;
  }
}
</style>
